import type {
  AllButtonBehavior,
  ButtonTextConfig,
  EffectStyleConfig,
} from '../interfaces'
import { ToolKit } from '../../lib/utils/toolkit'
import { EffectState, EffectType } from '../interfaces'

/**
 * 刷新按钮类名
 */
export const BUTTON_REFRESH_CLASS = 'btn-refresh-page'

/**
 * 按钮文本映射
 */
export const ButtonTexts: Record<AllButtonBehavior, ButtonTextConfig> = {
  open: {
    normal: '访问页面',
    success: '访问成功',
    failed: '访问失败',
  },
  refresh: {
    normal: '刷新页面',
    success: '刷新成功',
    failed: '刷新失败',
  },
  save: {
    normal: '保存配置',
    success: '保存成功',
    failed: '保存失败',
    loading: '保存中...',
  },
  apply: {
    normal: '应用配置',
    success: '应用成功',
    failed: '应用失败',
    loading: '应用中...',
    invalid: '校验失败',
  },
  hide: {
    normal: '隐藏',
    success: '已隐藏',
    failed: '隐藏失败',
  },
}

/**
 * 重置行为配置
 */
export const RESET_TYPES = {
  INPUT: 'input',
  STYLE: 'style',
}

/**
 * 主生效类型样式
 */
export const EFFECT_STYLE_MAP: Record<EffectType, EffectStyleConfig> = {
  [EffectType.INACTIVE]: {
    className: 'refresh-badge',
    bgColor: '#6c757d',
    textColor: 'white',
    label: '未启用',
  },
  [EffectType.IMMEDIATE]: {
    className: 'immediate-badge',
    bgColor: '#28a745',
    textColor: 'white',
    label: '已生效',
  },
  [EffectType.REFRESH]: {
    className: 'refresh-badge',
    bgColor: '#6c757d',
    textColor: 'white',
    label: '刷新生效',
  },
  [EffectType.MIXED]: {
    className: 'mixed-badge',
    bgColor: '#ffd700',
    textColor: '#333333',
    label: '即时/刷新',
  },
  [EffectType.GUEST]: {
    className: 'guest-badge',
    bgColor: '#ff4444',
    textColor: 'white',
    label: '登录生效',
  },
}

/**
 * 状态相关样式（用于MIXED类型）
 */
export const STATE_STYLE_MAP: Record<EffectState, EffectStyleConfig> = {
  [EffectState.ENABLED]: {
    className: 'enabled-badge',
    bgColor: '#28a745',
    textColor: 'white',
    label: '已生效', // 明确说明开启时的行为
  },
  [EffectState.DISABLED]: {
    className: 'disabled-badge',
    bgColor: '#ffd700',
    textColor: '#333333',
    label: '刷新生效', // 明确说明关闭时的行为
  },
}

const BASE_EFFECT_BADGE_STYLE = `
    .effect-badge {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 8px;
      padding: 2px 6px;
      border-radius: 0 8px;
      font-weight: bold;
      user-select: none !important;
    }
    
    .effect-badge.effect-animate {
      animation: fadeIn 0.5s ease-out forwards;
    }
  `

/**
 * 获取生效状态样式
 * @param effectType 生效类型
 * @param state 生效状态
 * @param options 选项参数
 * @param options.first 是否为首次生效
 * @param options.isLoggedIn 是否已登录
 * @returns 生效状态样式
 */
export function getEffectStyle(
  effectType: EffectType,
  state?: boolean,
  options?: {
    first?: boolean
    isLoggedIn?: boolean
  },
): EffectStyleConfig {
  const { first = false, isLoggedIn } = options || {}

  // 登录生效类型仅在未登录时返回生效样式
  if (isLoggedIn === false)
    return EFFECT_STYLE_MAP[EffectType.GUEST]

  // 根据状态返回不同样式
  if (effectType === EffectType.IMMEDIATE)
    return state ? EFFECT_STYLE_MAP[EffectType.IMMEDIATE] : EFFECT_STYLE_MAP[EffectType.INACTIVE]

  if (effectType === EffectType.MIXED) {
    if (first && state === false)
      return EFFECT_STYLE_MAP[EffectType.INACTIVE]

    return STATE_STYLE_MAP[state ? EffectState.ENABLED : EffectState.DISABLED]
  }

  // 非混合类型直接返回对应样式
  return EFFECT_STYLE_MAP[effectType]
}

/**
 * 将样式配置转换为 CSS 字符串
 * @param config 样式配置对象
 * @param selector 选择器前缀（可选）
 * @returns 生成的 CSS 字符串
 */
export function styleConfigToCSS(
  config: EffectStyleConfig,
  selector: string = '',
): string {
  const baseSelector = ToolKit.ui.style.classNameToSelector(config.className)
  const fullSelector = selector ? `${selector}${baseSelector}` : `${baseSelector}`

  return `
    ${fullSelector} {
      background-color: ${config.bgColor};
      color: ${config.textColor};
    }
  `
}

/**
 * 生成所有效果类型的 CSS 样式
 * @returns 完整的CSS样式字符串
 */
export function generateAllEffectStyles(): string {
  const styles: string[] = []

  // 基础样式
  styles.push(BASE_EFFECT_BADGE_STYLE)

  // 添加基础效果样式
  Object.values(EFFECT_STYLE_MAP).forEach((config) => {
    styles.push(styleConfigToCSS(config))
  })

  // 添加状态相关样式
  Object.values(STATE_STYLE_MAP).forEach((config) => {
    styles.push(styleConfigToCSS(config))
  })

  return styles.join('\n')
}

// 所有生效类型的类名
export const BADGE_EFFECT_CLASSNAMES: string[] = [
  ...Object.values(EFFECT_STYLE_MAP).map(item => item.className),
  ...Object.values(STATE_STYLE_MAP).map(item => item.className),
]
